<template>
  <div class="login-wrap">
    <el-form
      :model="user"
      class="demo-ruleForm"
      label-position="right"
      label-width="70px"
      status-icon
      :rules="myrules"
      :hide-required-asterisk="true"
      ref="formRef"
    >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <!-- <span style="color: darkgreen;"><h2>东软环保公众监督平台</h2></span> -->
            <span style="color: rgb(58, 83, 4);"><h2>东软环保公众监督平台</h2></span>
            <span style="color: rgb(58, 83, 4);"><h2>网格员端</h2></span>
            
          </div>
        </template>

        <div class="form-container">
          <div class="input-wrapper">
            <el-icon class="icon2" ><User /></el-icon>
            <div class="border-wrapper">
              <input type="text" class="border-item" v-model="user.code" placeholder="请输入登录编码" autocomplete="off" />
            </div>
          </div>

          <div class="input-wrapper">
            <el-icon class="icon2"><Key /></el-icon>
            <div class="border-wrapper">
              <input  type="password" class="border-item" v-model="user.password" placeholder="请输入密码" autocomplete="off" />
            </div>
          </div>
        </div>

        <div class="action">
          <el-button class ="btn" type="primary" round @click="login" plain>登录</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
// import axios from '../../axios';
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import JSEncrypt from "jsencrypt"; // 导入 jsencrypt 库
import Qs from 'qs';
import { ElIcon } from 'element-plus';
import { UserFilled, Key,User } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const user = ref({
  code: "",
  password: "",
});

const myrules = {
  code: [
    {
      required: true,
      trigger: "blur",
      message: "登录编码不能为空",
    },
  ],
  password: [
    {
      required: true,
      trigger: "blur",
      message: "密码为必填项",
    },
  ],
};

const formRef = ref(null);

const login = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 创建一个新的 JSEncrypt 实例
        const encryptor = new JSEncrypt();
        //获取公钥
        const publicKey = await getRSAPublicKey();
        console.log(publicKey);
        // 设置公钥，这里假设 publicKey 是你的 RSA 公钥字符串
        encryptor.setPublicKey(publicKey);
        // 加密密码
        const encryptedpassword1 = encodeURIComponent(
          encryptor.encrypt(user.value.password)
        );
        const encryptedusername1 = encodeURIComponent(
          encryptor.encrypt(user.value.code)
        );
        let data = Qs.stringify({
          encryptedUsername: encryptedusername1,
          encryptedPassword: encryptedpassword1,
        });
        // 发送 POST 请求
        const response = await axios.post('http://10.25.43.221:7000/service-admin/auth/staffLogin', 
        {
          encryptedUsername: encryptedusername1,
          encryptedPassword: encryptedpassword1,
        }, 
          {
            headers: {
            }
          }
        );
        const result = response.data;
        if (result.code === 0) {
          ElMessage.success('登录成功!');
          router.push({
            path: "/grider/taskList",
            // path: "/grider/test",
            query: {
              token: result.sendResult
            }
          });
        } else {
          console.error(result);
          ElMessage.error(result.msg);
        }
      } catch (error) {
        console.error('Login failed:', error);
      }
    }
  });
};

const getRSAPublicKey = async () => {
  try {
    const response = await axios.get("http://10.25.43.221:7000/service-admin/auth/public-key");
    return response.data;
  } catch (error) {
    console.error("Failed to fetch RSA public key:", error);
    throw error;
  }
};
</script>

<style scoped>
.login-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/02.png') no-repeat center center/cover;
}

.box-card {
  position: relative;
  width: 400px;
  height: 650px;
  border-radius: 10px;
  padding-top: 50px;
  background: url('@/assets/111.png') no-repeat center center/cover;
  overflow: hidden; 
  display: flex;
  flex-direction: column;
}

.card-header {
  text-align: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.icon2 {
  position: absolute;
  left: 15px;
  font-size: 30px;
  vertical-align: middle;
}

.btn {
  width: 100% !important;
  max-width: 200px !important;
  height: 40px !important;
  text-transform: uppercase;
  border: 3px solid #2ce7a5;
  text-align: center;
  color: white;
  line-height: 5px;
  border-radius: 30px;
  cursor: pointer;
  background-image: linear-gradient(120deg, #2ce7a5 0%, #05aa6d 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px auto;
  font-size: 18px;
  font-weight: bold;
}

.btn:hover {
  background-image: linear-gradient(120deg, #20d696 0%, #078959 100%);
}

.border-wrapper {
  background-image: linear-gradient(to right, #0eddb4, #08784f); 
  width: 250px;
  height: 50px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5px;
  margin: 0 auto;
}

.border-item {
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  border-radius: 60px;
  background-color: rgb(241, 255, 247);
  border: 0;
  text-align: center;
  font-size: 15px;
  outline: none;
}

.action {
  display: flex;
  justify-content: center;
}

/* 媒体查询，针对小屏幕设备 */
@media (max-width: 600px) {
  .login-wrap {
    background: none;
    /* height: auto; */
    padding: 20px;
  }

  .box-card {
    width: 100%;  /* 全屏宽度的95% */
    /* height: auto;  */
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

}

</style>

